$('.tbody').on('click', '.num-control span', function () {
    if ($(this).index() != 1) {
        let goodsNUm = $(this).parent().find('input').val() * 1
        let price = $(this).parents().eq(1).next().find('i').text() * 1;
        let title=$(this).parents().eq(2).find('.goods-title').text();
        if ($(this).index()) {
            // 添加
            goodsNUm += 1
        } else {
            // 移除
            if (goodsNUm == 1) {
                $(this).attr('disabled', 'true')
            } else {
                goodsNUm -= 1
            }
        }
        $(this).parent().find('input').val(goodsNUm)
        cart.forEach((obj)=>{
            if(obj.title==title){
                obj.num=goodsNUm;
            }
        })
        updateCart();
    }
})
$('.tbody').on('click', '.operate span', function () {
    if ($(this).index()) {
        // 关注
    } else {
        // 删除
        $(this).parents().eq(1).prev().remove()
        $(this).parents().eq(1).remove()
        // console.log( );
    }
})

var el_str = ``
for (let i = 0; i < 4; i++) {
    el_str += `<div class="swiper-slide">${i}</div>`
}
$('.swiper-wrapper').html(el_str);
// console.log();
var shopSlider_str = ``;
$('.swiper-slide').each((i) => {
    shopSlider_str = ``;
    shopSlider[i].forEach((item) => {
        shopSlider_str += `<section>
        <img src="${item.img}" alt="">
        <p class="shop-title">${item.title}</p>
        <p><strong><em>￥</em><i>${item.price}</i></strong></p>
        <button>加入购物车</button>
    </section>`
    })
    $('.swiper-slide').eq(i).html(shopSlider_str)
})

var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});

function updateCart() {
    let str = ``
    cart.forEach((obj) => {
        str += `<section>
    <div class="merchant">
    <input type="checkbox" name="" id="">2件9折
    </div>
    <div class="tr">
        <div class="td">
            <input type="checkbox" name="" id="">
        </div>
        <div class="td goods-details">
            <img src="${obj.img}"
                alt="">
            <p class="goods-title">${obj.title}</p>
            <div>
                <p>Y7000P 2022/RTX3050/12代i7</p>
                <span>官方标配</span>
            </div>
        </div>
        <div class="td price">
            ￥${obj.price}.00
        </div>
        <div class="td num-control">
            <section>
                <span>-</span>
                <span contenteditable="true">
                    <input type="text" value="${obj.num}">
                </span>
                <span>+</span>
            </section>
            <section>有货</section>
        </div>
        <div class="td total-price">
            <b>¥<i>${obj.price*obj.num}.00</i></b>
        </div>
        <div class="td operate">
            <span>删除</span>
            <br>
            <span>移入关注</span>
        </div>
    </div>
</section>`
    })
    $('.tbody').html(str);
}
var cart = []
$('.swiper-slide button').click(function () {
    let obj = {};
    obj.img = $(this).parent().find('img').attr('src');
    obj.title = $(this).parent().find('.shop-title').text();
    obj.price = $(this).parent().find('i').text() * 1;
    obj.num = 1;
    cart.push(obj);
    updateCart()
})